.logIn {
  background: url("../../imges/register.png") no-repeat;
  background-size: 100% 100%;
  height: 100vh;
  width: 100vw;

  .ant-form-item-explain-error {
    text-align: left;
    margin-left: 20px;
    position: relative;
    top: 4px;
  }

  .ant-form {
    width: 20vw;
  }



  .ant-form-item {
    margin-bottom: 2vh;
  }

  .password {
    background: url("../../imges/icon/password.svg") no-repeat;
    background-size: 100% 100%;
    height: 2vh;
    width: 2vw;
  }

  .confirmpassword {
    background: url("../../imges/icon/confirm_password.svg") no-repeat;
    background-size: 100% 100%;
    height: 2vh;
    width: 2vw;
  }

  .phone {
    background: url("../../imges/icon/phone.svg") no-repeat;
    background-size: 100% 100%;
    height: 2vh;
    width: 2vw;
  }

  .verification {
    background: url("../../imges/icon/verification.svg") no-repeat;
    background-size: 100% 100%;
    height: 2vh;
    width: 2vw;
  }

  .username {

    .username_icon {
      background: url("../../imges/icon/username.svg") no-repeat;
      background-size: 100% 100%;
      height: 2vh;
      width: 2vw;
    }

    .ant-input-affix-wrapper {
      width: 19.5vw !important;
    }
    .ant-select-selector {
      width: 19.5vw !important;
      min-height: 62px !important;
    }
    .ant-select-selection-item,.ant-select-selection-placeholder{
      display: flex
;
    align-items: center;
    }
  }

  .logIn_box {
    width: (520 / 1920) * 100vw;
    height: (528 / 960) * 100vh;
    background: #ffffff;
    position: absolute;
    right: 11vw;
    top: 20vh;
    border-radius: 8px;
    display: flex;
    padding: 30px 50px;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-around;
  }


  .ant-input {
    width: 19.5vw;
    height: 5vh;
  }

  .ant-col {
    margin-top: 0.3vh;
  }

  .ant-input-password {
    width: 19.5vw !important;
  }

  .ant-input-affix-wrapper {
    padding: 0px 5px;
  }

  .bth {
    width: 19.5vw;
    height: 6vh;
    color: #ffffff;
    font-size: 1rem;
    border-radius: 5px;
    position: relative;
    top: -3vh;
    background: linear-gradient(to right, rgb(157, 74, 212), rgb(191, 104, 241));
  }

  .ant-btn-primary:hover, .ant-btn-primary:focus {
    color: #ffffff;
    background: linear-gradient(to right, rgb(157, 74, 212), rgb(191, 104, 241));
    box-shadow: 1px 1px 2px rgb(89, 36, 120) inset;
  }

  .footer {
    width: 19.5vw;
    font-size: 14px;
    text-align: right;

    span:nth-child(2) {
      color: #bc57ff;
    }

  }

  .footer :hover {
    cursor: pointer;

  }

  .ant-input-affix-wrapper {
    border-radius: 5px;
  }

  .register {
    height: (658 / 960) * 100vh;
    top: 15vh;
    .ant-form-item-control {
      height: 60px;
    }
    .bth {
      top: 0vh;
      left: -6.5vw;
      margin-bottom: 4px;
    }

    .ant-form-item {
      margin-bottom: 3px;
    }

    .auth {
      .ant-input-affix-wrapper {
        width: 12vw !important;
        position: relative;
        left: 0vw;
        top: -1vh;
      }

      .ant-form-item-explain-error {
        text-align: left;
        margin-left: 20px;
        position: relative;
        //top: -8px;
      }

      .auth_bth {
        height: 5vh;
        width: 7vw;
        color: rgb(209, 140, 299);
        border: rgb(209, 140, 299) 1px solid;
        border-radius: 5px;
        margin-left: 0.5vw;
      }
    }
  }

}